<template>
  <div>
    <el-tooltip :content="tooltipContent" placement="bottom" :enterable="false">
      <div @click="switchTheme()" style="cursor:pointer">
        <svg v-if="isDark" t="1659181974650" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="1394" width="24" height="24">
          <path
            d="M463.90303 938.666667c-114.812121 0-221.866667-44.993939-302.545454-127.224243l-27.927273-27.927272 38.787879-10.860607c164.460606-44.993939 279.272727-195.490909 279.272727-366.157575 0-100.848485-38.787879-195.490909-108.606061-266.860606l-27.927272-27.927273 38.787879-10.860606c37.236364-9.309091 74.472727-15.515152 111.70909-15.515152 234.278788 0 426.666667 190.836364 426.666667 426.666667S699.733333 938.666667 463.90303 938.666667z m-240.484848-133.430303c68.266667 55.854545 152.048485 86.884848 242.036363 86.884848 209.454545 0 380.121212-170.666667 380.121213-380.121212S673.357576 131.878788 463.90303 131.878788c-20.169697 0-41.890909 1.551515-62.060606 4.654545 62.060606 76.024242 94.642424 169.115152 94.642424 268.412122 1.551515 179.975758-110.157576 338.230303-273.066666 400.290909z"
            p-id="1395"></path>
        </svg>
        <svg v-else t="1659181993019" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="1552" width="24" height="24">
          <path
            d="M512 735.418182c-122.569697 0-223.418182-100.848485-223.418182-223.418182S389.430303 288.581818 512 288.581818 735.418182 389.430303 735.418182 512 634.569697 735.418182 512 735.418182z m0-400.290909c-97.745455 0-176.872727 79.127273-176.872727 176.872727S414.254545 688.872727 512 688.872727 688.872727 609.745455 688.872727 512 609.745455 335.127273 512 335.127273zM512 246.690909c-13.963636 0-24.824242-10.860606-24.824242-24.824242V111.709091c0-13.963636 10.860606-24.824242 24.824242-24.824243 13.963636 0 24.824242 10.860606 24.824242 24.824243v110.157576c1.551515 12.412121-10.860606 24.824242-24.824242 24.824242zM324.266667 324.266667c-9.309091 9.309091-26.375758 9.309091-35.684849 0l-79.127273-79.127273c-9.309091-9.309091-9.309091-26.375758 0-35.684849 9.309091-9.309091 26.375758-9.309091 35.684849 0l79.127273 79.127273c9.309091 9.309091 9.309091 24.824242 0 35.684849zM246.690909 512c0 13.963636-10.860606 24.824242-24.824242 24.824242H111.709091c-13.963636 0-24.824242-10.860606-24.824243-24.824242 0-13.963636 10.860606-24.824242 24.824243-24.824242h110.157576c12.412121-1.551515 24.824242 10.860606 24.824242 24.824242zM324.266667 699.733333c9.309091 9.309091 9.309091 26.375758 0 35.684849l-79.127273 79.127273c-9.309091 9.309091-26.375758 9.309091-35.684849 0-9.309091-9.309091-9.309091-26.375758 0-35.684849l79.127273-79.127273c9.309091-9.309091 24.824242-9.309091 35.684849 0zM512 777.309091c13.963636 0 24.824242 10.860606 24.824242 24.824242v110.157576c0 13.963636-10.860606 24.824242-24.824242 24.824243-13.963636 0-24.824242-10.860606-24.824242-24.824243v-110.157576c-1.551515-12.412121 10.860606-24.824242 24.824242-24.824242zM699.733333 699.733333c9.309091-9.309091 26.375758-9.309091 35.684849 0l79.127273 79.127273c9.309091 9.309091 9.309091 26.375758 0 35.684849-9.309091 9.309091-26.375758 9.309091-35.684849 0l-79.127273-79.127273c-9.309091-9.309091-9.309091-24.824242 0-35.684849zM777.309091 512c0-13.963636 10.860606-24.824242 24.824242-24.824242h110.157576c13.963636 0 24.824242 10.860606 24.824243 24.824242 0 13.963636-10.860606 24.824242-24.824243 24.824242h-110.157576c-12.412121 1.551515-24.824242-10.860606-24.824242-24.824242zM699.733333 324.266667c-9.309091-9.309091-9.309091-26.375758 0-35.684849l79.127273-79.127273c9.309091-9.309091 26.375758-9.309091 35.684849 0 9.309091 9.309091 9.309091 26.375758 0 35.684849l-79.127273 79.127273c-9.309091 9.309091-24.824242 9.309091-35.684849 0z"
            p-id="1553"></path>
        </svg>
      </div>
    </el-tooltip>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useDark, useToggle } from "@vueuse/core";

const isDark = useDark();//useDark()返回一个布尔值，表示当前是否是暗黑模式
const switchTheme = useToggle(isDark);//定义一个toggleDark函数，用来切换主题

const tooltipContent = computed(() => isDark.value ? "黑夜" : "白天");//用来显示tooltip上的文字
</script>

<style>
/* 引入样式 */
/* @import "./assets/base.css"; */
/* @import 'element-plus/theme-chalk/dark/css-vars.css'; */
</style>
